<template>
	<view>
		<view class="point-top">
			<view class="pt-title">积分明细</view>
			<view class="pt-num">总积分：<text style="color: #ffaa00;font-weight: bold;font-size: 30rpx;">{{myPoints}}</text> </view>
		</view>
		<view class="point-container">
			<view class="pc-content" v-for="(item,index) in pointsList" :key="index">
				<view class="pc-block">
					<view class="pc-reason">{{item.reason}}</view>
					<view class="pc-time">
						2023/11/07 09:47
					</view>
					<view class="pc-num">{{item.type === '0' ? '+' :'-'}}{{item.score}}</view>
				</view>
				<view class="pc-space"></view>
			</view>
		</view>
	</view>
</template>

<script>
    import {pointsRecordList} from '@/utils/api.js'
	export default {
		data() {
			return {
				
				pointsList:[],
			myPoints:uni.getStorageSync('trainneInfo')?Number(uni.getStorageSync('trainneInfo').points) :0,
			}
		},
		onLoad() {
			this.pointsRecordList()
		},
		methods: {
			async pointsRecordList(){
				uni.showLoading()
				
				const {code,rows} = await pointsRecordList()
				if(code == 200){
					uni.hideLoading()
				    this.pointsList = rows
				}
			 	
			},
		},
	
	}
</script>

<style>
.point-top{
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}
.pt-title{
	font-weight: bold;
}
.pt-num{
	color: #9e9898;
}
.point-container{
	width: 93%;
	margin: 20rpx auto;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
}
.pc-block{
	position: relative;
}
.pc-time{
	color: #9e9898;
	margin-top: 30rpx;
}
.pc-num{
	position: absolute;
	right: 20rpx;
	top: 0;
	color:#ffaa00 ;
	font-weight: bold;
}
.pc-space{
	width: 100%;
	height: 2rpx;
	margin: 20rpx auto;
	background-color: #f1e8e8;
}
</style>
